<template>
  <div class="containsClass">
    <div class="bodyClass">
      <div>
        <img
          class="backClass"
          @click="goBack"
          src="@/assets/login/fanhui.svg"
        />
        <div class="titleClass">计划选择</div>
        <div class="boxClass">
          <div class="dataBoxClass">
            <div class="noInfo" v-if="dataList.length == 0">暂无计划</div>
            <div>
              <a-radio-group class="groupClass" v-model="value" size="large">
                <a-radio
                  :value="item.id"
                  v-for="(item, key) in dataList"
                  :key="key"
                >
                  <span>{{ item.screeningName }}</span>
                </a-radio>
              </a-radio-group>
            </div>
          </div>
        </div>
        <a-button
          shape="round"
          @click="goPage"
          v-if="dataList.length != 0"
          class="btnClass"
          >确定</a-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { notification } from "ant-design-vue";
export default {
  data() {
    return {
      dataList: [],
      value: "",
      classData: JSON.parse(sessionStorage.getItem("classData")),
    };
  },
  created() {
    this.$store.commit("setIsShow", false);
    let userInfo = JSON.parse(sessionStorage.getItem("myUserInfo"));
    let params = {
      loginKey: userInfo.loginKey,
      uid: userInfo.uid,
      classId: this.classData.classId,
    };
    this.$POST("/pad/getScreeningList", params).then((rr) => {
      console.log("rr", rr);
      this.dataList = rr.data;
      /* this.dataList = [
        {
          screeningName: "一月计划（一）",
          id:1
        },
        {
          screeningName: "一月计划（二）",
          id:2
        },
        {
          screeningName: "一月计划（三）",
          id:3
        },
        {
          screeningName: "一月计划（四）",
          id:4
        },
      ]; */
    });
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goPage() {
      if (!this.value) {
        return notification.error({
          message: "提示",
          description: "请先选择计划进行下一步",
        });
      }
      let data = this.dataList.find((i) => i.id == this.value);
      console.log(data, "dd");
      sessionStorage.setItem("screeningId", this.value);
      this.$router.push("/ClassList");
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-radio-inner {
  border: 2px solid #0dabf5;
}
.containsClass {
  width: 30vw;
  height: 100%;
  .bodyClass {
    width: 100%;
    height: 100%;
    background-size: cover; /* 图片覆盖整个容器 */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-position: center; /* 图片居中显示 */
    background-image: url("~@/assets/login/beijingtu_a.png");
    margin: 0 auto;
    padding-top: 0.2rem;
    text-align: center;
    font-weight: bold;
    position: relative;
    & > div {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      position: relative;
      .backClass {
        position: absolute;
        cursor: pointer;
        left: 0;
        top: 0;
        width: 0.25rem;
        height: 0.25rem;
      }
      .titleClass {
        font-size: 0.16rem;
        color: #0f6c80;
        margin-bottom: 0.15rem;
      }
      .boxClass {
        height: 50%;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 0.06rem;
        padding: 0.1rem 0;
        .dataBoxClass {
          height: 100%;
          overflow-y: auto;

          .noInfo {
            display: flex;
            height: 100%;
            align-items: center;
            justify-content: center;
            font-size: 0.16rem;
            color: #adabab;
          }
          & > div {
            padding: 0 0.05rem;
            .groupClass {
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              .ant-radio-wrapper {
                margin-bottom: 0.06rem;
              }
              span {
                font-size: 0.15rem;
              }
              /deep/.ant-radio-inner {
                width: 0.15rem;
                height: 0.15rem;
              }
              /deep/.ant-radio-inner::after {
                width: 0.07rem;
                height: 0.07rem;
                top: calc(50% - 0.035rem);
                left: calc(50% - 0.035rem);
              }
            }
          }
        }
      }
      .btnClass {
        width: 55%;
        height: 0.3rem;
        font-size: 0.12rem;
        letter-spacing: 0.03rem;
        text-indent: 0.03rem;
        color: #fff;
        background-color: #ffa574;
        margin-top: 0.28rem;
      }
    }
  }
}
</style>